<script setup lang="ts">
import {ref} from 'vue'
import noHeadCard from "@/components/noHead-card.vue";
import useEcharts from '@/hook/useEcharts'
//头部数据
let homeList = ref([
  {
    font: 'icon-dingdan1',
    name: '总订单',
    count: "102,400",
    color: '#1296db'
  },
  {
    font: 'icon-icon-wodeshouru',
    name: '总销售额',
    count: "102,400",
    color: '#d4237a'
  },
  {
    font: 'icon-shangpin',
    name: '今日订单数',
    count: "102,400",
    color: '#1296db'
  },
  {
    font: 'icon-biometric-identification',
    name: '今日销售额',
    count: "102,400",
    color: '#1afa29'
  },
])

//图标dom
const chartRef = ref(null);
//图标数据
const option = {
  title: {
    text: '数据统计'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['订单', '销售额', '注册人数', '管理员人数']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['2024/5/1', '2024/5/10', '2024/5/16', '2024/5/20', '2024/5/29', '2024/6/10', '2024/6/22']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '订单',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '销售额',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '注册人数',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '管理员人数',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
  ]
};

/**
 * 使用 Echarts 渲染图表
 * @param {Object} chartRef - 图表的引用DOM
 * @param {Object} option - 图表的配置项（数据）
 */
useEcharts(chartRef, option)


</script>
<template>
  <noHeadCard>
    <template #head>
      <div class="home-head">
        <ul class="home-head-list">
          <li class="home-head-item" v-for="(item, index) in homeList" :key="index">
            <el-card style="width: 100%;height: 100%">
              <div class="home-head-item-card">
                <div class="home-head-item-icon">
                  <i class="iconfont" :class="item.font" :style="{color: item.color}"></i>
                </div>
                <div class="home-head-item-content">
                  <h2>{{ item.name }}</h2>
                  <span>{{ item.count }}</span>
                </div>
              </div>
            </el-card>
          </li>
        </ul>
      </div>
    </template>
    <template #content>
      <div class="home-content">
        <el-card style="max-width: 100%">
          <div ref="chartRef" style="width: 100%; height: 650px;"></div>
        </el-card>
      </div>
    </template>
  </noHeadCard>
</template>

<style scoped>
.home-head-list {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

.home-head-item {
  flex: 1;
  height: 140px;
}

.home-content {
  width: 100%;
  margin-top: 65px;
}

.iconfont {
  font-size: 100px;
}

.home-head-item-card {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.home-head-item-content h2 {
  font-size: 32px;
  color: #ccc
}

.home-head-item-content span {
  font-size: 20px;
  color: #333;
  font-weight: 600;
}

.home-head-item-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
</style>